<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-steps :active="active" finish-status="success">
          <el-step title="待付款" :description="modifyTime[0]" />
          <el-step title="待发货" :description="modifyTime[1]" />
          <el-step title="已发货" :description="modifyTime[2]" />
          <el-step title="已完成" :description="modifyTime[3]" />
          <el-step title="已关闭" :description="modifyTime[4]" />
        </el-steps>
      </div>
      <div slot="header" class="clearfix">
        <div class="title-list">
          <p>订单信息:</p>
          <div v-if="active == 0">待付款</div>
          <div v-else-if="active == 1">待发货</div>
          <div v-else-if="active == 2">已发货</div>
          <div v-else-if="active == 3">已完成</div>
          <div v-else-if="active == 4">已关闭</div>
          <div v-else-if="active == 5">无效订单</div>
        </div>
        <el-row v-if="list.orderBase.totalAmount != undefined" :gutter="20">
          <el-col :span="6">
            <span>订单金额:</span><span v-if="list.orderBase.totalAmount !== undefined" style="color:red;">{{
              list.orderBase.totalAmount
            }}</span>
          </el-col>
          <el-col :span="6">
            <span>订单编号:</span><span>{{ list.orderBase.orderSn }}</span>
          </el-col>
          <el-col :span="6">
            <span>用户账号:</span><span>{{ list.orderBase.memberUsername }}</span>
          </el-col>
          <el-col :span="6">
            <span>备注:</span><span>{{ list.orderBase.couponAmount }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <span>下单时间:</span><span>{{ list.orderBase.createTime }}</span>
          </el-col>
          <el-col :span="6">
            <span>付款时间:</span><span>{{ list.orderBase.paymentTime }}</span>
          </el-col>
          <el-col :span="6">
            <span>发货时间:</span><span>{{ list.orderBase.deliveryTime }}</span>
          </el-col>
          <el-col :span="6">
            <span>收货时间:</span><span>{{ list.orderBase.receiveTime }}</span>
          </el-col>
        </el-row>
      </div>

      <div slot="header" class="clearfix" style="padding: 30px 5px">
        <div class="title-list">
          <p>订单信息:</p>
        </div>
        <el-row :gutter="20">
          <el-col
            :span="6"
          ><div class="grid-content bg-purple">
            <span>收货人:</span><span>{{ list.orderBase.receiverName }}</span>
          </div></el-col>
          <el-col
            :span="6"
          ><div class="grid-content bg-purple">
            <span>用户姓名:</span><span>{{ list.orderBase.memberUsername }}</span>
          </div></el-col>
          <el-col
            :span="6"
          ><div class="grid-content bg-purple">
            <span>手机号码:</span><span>{{ list.orderBase.receiverPhone }}</span>
          </div></el-col>
          <el-col
            :span="6"
          ><div class="grid-content bg-purple">
            <span>邮政编码:</span><span>{{ list.orderBase.receiverPostCode }}</span>
          </div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col
            :span="6"
          ><div class="grid-content bg-purple">
            <span>地区:</span><span>{{ list.orderBase.receiverProvince }}_{{
              list.orderBase.receiverCity
            }}_{{ list.orderBase.receiverRegion }}</span>
          </div></el-col>
          <el-col
            :span="6"
          ><div class="grid-content bg-purple">
            <span>详细地址:</span><span>{{ list.orderBase.receiverDetailAddress }}</span>
          </div></el-col>
        </el-row>
      </div>
      <div slot="header" class="clearfix" style="padding: 30px 5px">
        <div class="title-list">
          <p>订单信息:</p>
        </div>
        <el-table :data="list.orderItems" border style="width: 100%">
          <el-table-column
            fixed
            prop="productName"
            label="商品名称"
            align="center"
            width="150"
          />
          <el-table-column
            prop="productPic"
            label="商品图片"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <img
                :src="scope.row.productPic"
                alt=""
                style="width: 100px; height: 100px"
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="isReturn"
            label="是否退货"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.isReturn == 0">否</span>
              <span v-else style="color:red;" @click="pathdel(scope.row)">是</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="productBrand"
            align="center"
            label="品牌"
            width="200"
          />
          <el-table-column
            prop="realAmount"
            label="价格"
            align="center"
            width="250"
          />
          <el-table-column
            prop="productQuantity"
            label="商品数量"
            align="center"
            width="150"
          />
          <el-table-column
            prop="totalPrice"
            fixed="right"
            align="center"
            label="小计"
            width="100"
          />
        </el-table>
        <div class="title-list">
          <p>订单信息:</p>
        </div>
        <el-row :gutter="20">
          <el-col
            :span="6"
          ><div class="grid-content bg-purple">
            <span>运费金额:</span><span style="color: red">0</span>
          </div></el-col>
          <el-col
            :span="6"
          ><div class="grid-content bg-purple">
            <span>订单总金额:</span><span>{{ list.orderBase.totalAmount }}</span>
          </div></el-col>
          <el-col
            :span="6"
          ><div class="grid-content bg-purple">
            <span>实际金额:</span><span>{{ list.orderBase.payAmount }}</span>
          </div></el-col>
          <el-col
            :span="6"
          ><div class="grid-content bg-purple">
            <span>运费金额:</span><span style="color: red">0</span>
          </div></el-col>
        </el-row>
      </div>
      <div slot="header" class="clearfix" style="padding: 30px 5px">
        <div class="title-list">
          <p>物流信息:</p>
        </div>
        <el-table v-show="active > 1" :data="kdxq" border style="width: 100%">
          <el-table-column prop="time" label="时间" align="center" width="300" />
          <el-table-column prop="cood" label="状态" align="center" width="500" />
          <el-table-column prop="bz" align="center" label="备注" />
        </el-table>
      </div>
      <div slot="header" class="clearfix">
        <el-form
          v-show="active === 1"
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="活动区域">
            <el-select
              v-model="formInline.deliveryCompany"
              size="mini"
              placeholder="物流公司"
            >
              <el-option label="中国邮政" value="中国邮政" />
              <el-option label="顺丰快递" value="顺丰快递" />
              <el-option label="韵达快递" value="韵达快递" />
              <el-option label="申通快递" value="申通快递" />
              <el-option label="中通快递" value="中通快递" />
            </el-select>
          </el-form-item>
          <el-form-item label="物流单号">
            <el-input
              v-model="formInline.deliverySn"
              placeholder="物流单号"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认发货</el-button>
          </el-form-item>
        </el-form>
        <div v-show="isReturn && active<=3" class="btm-btn">
          <el-button type="primary" @click="mandatory">强制收货</el-button>
        </div>
        <div v-show="active === 3" class="btm-btn">
          <el-button type="primary" @click="closeorder">关闭订单</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script >
import { orderDetail, sendDone, receiveProductsForce, finishOrder } from '@/api/order/index'
export default {
  components: {},
  data() {
    return {
      list: {},
      active: 0,
      modifyTime: ['', '', '', '', ''],
      kdxq: [
        {
          time: '2015-03-06 21:16:58',
          cood: '深圳市横岗速递营销部已收件',
          bz: '深圳市横岗速递营销部已收件'
        },
        { time: '2015-03-07 14:25:00', cood: '离开深圳市 发往广州市', bz: '' },
        {
          time: '2015-03-08 00:17:00',
          cood: '到达广东速递物流公司广航中心处理中心（经转）',
          bz: ''
        },
        {
          time: '2015-03-08 01:15:00',
          cood: '离开广州市 发往北京市（经转）',
          bz: ''
        },
        {
          time: '2015-03-09 09:01:00',
          cood: '到达北京黄村转运站处理中心（经转）',
          bz: ''
        },
        {
          time: '2015-03-09 18:39:00',
          cood: '离开北京市 发往呼和浩特市（经转）',
          bz: ''
        },
        {
          time: '2015-03-10 18:06:00',
          cood: '到达 呼和浩特市 处理中心',
          bz: ''
        },
        {
          time: '2015-03-11 09:53:48',
          cood: '呼和浩特市邮政速递物流分公司金川揽投部安排投递',
          bz: '投递员姓名：安长虹;联系电话：18047140142'
        }
      ],
      formInline: {
        deliveryCompany: '',
        deliverySn: '',
        orderId: ''
      },
      isReturn: false
    }
  },

  computed: {},
  created() {
    this.orderDetailAPI()
  },

  mounted() {},

  methods: {
    // 跳转退单详情
    pathdel(row) {
      console.log(row)
      this.$router.push({ name: 'Delorderlist', query: { id: row.returnId }})
    },
    //   关闭订单
    closeorder() {
      var _this = this
      finishOrder(this.$route.query.id).then(res => {
        console.log(res)
        if (res.success) {
          _this.orderDetailAPI()
          _this.$message.success('关闭成功')
        } else {
          _this.$message.error(`${res.message}`)
        }
      })
    },
    // 强制收货
    mandatory() {
      var _this = this
      receiveProductsForce(this.$route.query.id).then((res) => {
        console.log(res)
        if (res.success) {
          _this.orderDetailAPI()
          _this.$message.success('收货成功')
        } else {
          _this.$message.error(`${res.message}`)
        }
      })
    },
    //   发货
    onSubmit() {
      var _this = this
      console.log(this.formInline)
      sendDone(this.formInline).then((res) => {
        // console.log(res)
        if (res.success) {
          _this.orderDetailAPI()
          _this.$message.success('发货成功')
        } else {
          _this.$message.error('发货失败请重新填写')
        }
      })
    },
    orderDetailAPI() {
      var _this = this
      orderDetail(this.$route.query.id).then((res) => {
        console.log(res)
        if (res.success) {
          var items = res.data.orderDetail.orderItems
          var isinm = items.every(element => {
            return element.isReturn == 1
          })
          _this.isReturn = isinm
          _this.list = res.data.orderDetail
          _this.active = res.data.orderDetail.orderBase.status
          _this.formInline.orderId = res.data.orderDetail.orderBase.id
          _this.modifyTime[_this.active] =
            res.data.orderDetail.orderBase.modifyTime
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.title-list {
  display: flex;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 20px;
  p {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px;
  }
  div {
    width: 66px;
    height: 24px;
    padding: 0 8px;
    margin: 15px 0;
    line-height: 22px;
    background: #f9f9f9;
  }
}
.btm-btn {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
